<template>
	<div class="xh-multiple-wrap">
		<el-popover
			v-model="showPopover"
			placement="bottom-start"
			trigger="click"
			:disabled="disabled"
			:width="popoverWidth"
		>
			<div
				:class="[disabled ? 'disabled' : '', 'xh-multiple']"
				slot="reference"
				ref="reference"
				tabindex="0"
			>
				<div
					class="xh-multiple__child"
					v-for="(option, index) in checkOptions"
					:key="index"
					@click.stop
				>
					<span>{{ option.name }}</span>
					<div class="el-icon-close" @click.stop="handleDelete(option)"></div>
				</div>
				<div class="el-icon-plus"></div>
			</div>
			<div>
				<el-input
					size="mini"
					placeholder="搜索"
					class="xh-select-search"
					v-model="filterString"
				>
				</el-input>
				<div class="xh-multiple-select-box">
					<div
						:class="[dataValue[option.value] ? 'checked' : '', 'box-item']"
						v-for="(option, index) in filterOptions"
						:key="index"
					>
						<el-checkbox
							v-model="dataValue[option.value]"
							@change="handleChange(option, arguments)"
						></el-checkbox>
						<div class="box-item__name">{{ option.name }}</div>
					</div>
				</div>
			</div>
		</el-popover>
	</div>
</template>

<script>
import props from './mixins/props'
export default {
	name: 'xh-mult-select',
	mixins: [props],
	data() {
		return {
			showPopover: false,
			popoverWidth: 250,
			filterString: '',

			dataValue: {}
		}
	},
	watch: {
		value: {
			handler(value) {
				var setMapData = this.setting.reduce((data, opt) => {
					data[opt.value] = false
					return data
				}, {})
				this.dataValue = value
					.split(',')
					.filter(Boolean)
					.reduce((obj, val) => {
						obj[val] = true
						return obj
					}, setMapData)
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		handleChange(option, [check]) {
			let { dataValue } = this
			let value = Object.keys(dataValue)
				.filter((key) => dataValue[key])
				.join(',')
			this.valueChange(value)
		},
		handleDelete(option) {
			this.dataValue[option.value] = false
			let { dataValue } = this
			let value = Object.keys(dataValue)
				.filter((key) => dataValue[key])
				.join(',')
			this.valueChange(value)
		},
		valueChange(val) {
			this.$emit('value-change', {
				item: this.item,
				index: this.index,
				value: val
			})
		}
	},
	computed: {
		setting() {
			return this.item ? this.item.data.setting : []
		},
		checkOptions() {
			return this.setting.filter((option) => this.dataValue[option.value])
		},
		filterOptions() {
			return this.setting.filter((ele) => ele.name.includes(this.filterString))
		}
	},
	mounted() {
		var width = this.$refs.reference.offsetWidth
		this.popoverWidth = width > 250 ? width : 250
	}
}
</script>

<style scoped="scoped" lang="scss">
.xh-multiple-wrap {
	display: inline-block;
	width: 100%;
	line-height: 40px;
}
.xh-multiple {
	min-height: 34px;
	line-height: 34px;
	border: 1px solid #ddd;
	border-radius: 3px;
	box-sizing: border-box;
	padding-right: 36px;
	position: relative;
	vertical-align: bottom;
	cursor: pointer;
	display: inline-block;
	width: 100%;
	vertical-align: middle;
	transition: border-color 0.2s linear;
	&.disabled {
		cursor: not-allowed;
		background: #f8f8f8;
	}
	&:hover:not(.disabled) {
		border-color: #bcbcbc;
	}
	&:focus:not(.disabled) {
		border-color: #3e84e9;
	}

	.el-icon-plus {
		font-size: 16px;
		font-weight: 600;
		padding-right: 10px;
		line-height: 34px;
		position: absolute;
		right: 0;
		top: 50%;
		color: #aaa;
		transform: translateY(-50%);
	}
}
.xh-multiple__child {
	line-height: 28px;
	height: 27px;
	white-space: nowrap;
	color: #333;
	margin: 0 5px;
	padding: 0 5px;
	font-size: 12px;
	display: inline-block;
	background: #eff3fc;
	user-select: none;
}
.xh-multiple-select-box {
	height: 248px;
	margin-top: 5px;
	padding: 5px;
	overflow: auto;
}
.xh-select-search {
	display: block;
}
.box-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-bottom: 3px;
	cursor: pointer;
	.box-item__name {
		margin-left: 5px;
		font-size: 13px;
		color: #333;
	}
	&.checked {
		.box-item__name {
			color: #3e84e9;
		}
	}
}
</style>
